<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="btn1">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height: 40px;width: 40px;background-color:pink;position:absolute;left:0px;top:100px;"></div>

<!-- <script src="http://files.cnblogs.com/files/xiaohuochai/parabolMove.js"></script> -->
<script>
reset.onclick = function(){
    history.go(0);
}
btn1.onclick = function(){
	// console.log(1)
    parabolMove({obj:test,target:200});
}

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
} 
function parabolMove(json){
    //设置要操作的元素
    var obj = json.obj;
    //设置x轴上的目标值
    var target = json.target;
    target = Number(target) || 300;
    //设置x轴的步长值
    var stepValue = json.step || 2;
    //设置x轴的步长
    var step = 0;
    //设置回调函数
    var fn = json.fn;
    //参数a、b、c
    var a = json.a;
    a = Number(a) || 0.01;
    var b = json.b;
    b = Number(b) || -1*target/100;
    var c = json.c;
    c = Number(c) || 10;
    //初始值
    var left = parseFloat(getCSS(obj,'left'));
    if(left >= target){return;}
    var top = parseFloat(getCSS(obj,'top')); 
    //清除定时器
    if(obj.timer){return;}
    //声明当前值cur
    var cur = {};
    obj.timer = setInterval(function(){
        //更新步长值
        step += stepValue; 
        //更新left和top值
        var x = left + step;
        var y = top + a*step*step + b*step + c;
        if(x > target){
            x = target;
        }
        test.style.left = x + 'px';
        test.style.top = y + 'px';  
        //如果到达目标点，清除定时器
        if(x == target){
            clearInterval(obj.timer);
            obj.timer = 0;
            fn && fn.call(obj);    
        }  
    },20);
}

</script>
</body>
</html>